<template>
<div class="advertise-main">
    <el-card class="card">
        <div slot="header"> <el-button type="primary" @click="addAvertise">新增</el-button></div>
       
        <div>
            <el-table :data="advertiseList" style="width: 100%" border v-loading="loading">
                <el-table-column label="序号" type="index"  header-align="center"
                    align="center" width="60">
                </el-table-column>

                <el-table-column prop="name" label="名称"  header-align="center"
                    align="center" width="140">
                </el-table-column>
                 
                <el-table-column
                    header-align="center"
                    align="center"
                    label="图片" width="120">
                    <template slot-scope="scope"><img :src="scope.row.pic" alt="sorry"></template>
                </el-table-column>
                 <el-table-column prop="startTime" label="开始时间" width="160" sortable   header-align="center"
                    align="center">
                </el-table-column>
                  <el-table-column prop="endTime" label="结束时间" width="160" sortable   header-align="center"
                    align="center">
                </el-table-column> 
                <el-table-column prop="orderCount" label="下单数量">
                </el-table-column>
                 
                  <el-table-column prop="clickCount" label="点击数量">
                </el-table-column>
                <el-table-column prop="sort" label="排序">
                </el-table-column> 
                 <el-table-column
                    header-align="center"
                    align="center"
                    label="上下线状态" width="120">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"></el-switch>
                    </template>
                </el-table-column>
                 <el-table-column  label="轮播位置">
                      <template slot-scope="scope">
                        <el-switch v-model="scope.row.type" :active-value="1" :inactive-value="0"></el-switch>
                    </template>
                </el-table-column>
                  <el-table-column prop="url" label="链接地址">
                </el-table-column>
                <el-table-column header-align="center" align="center" label="操作" width="120" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle @click="goEditAdvertise(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="goDelAdvertise(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>

</div>
</template>

<script>

import {
    adsList,
    delAds
} from '@/api/advertise/index'
export default {
    components: {

    },
    data() {
        return {
            advertiseList: [],
            loading:true

        };
    },
    computed: {

    },
    created() {
        this.init()

    },
    mounted() {

    },
    methods: {
        init() {
            adsList().then(res => {
                if(res.success){
                    this.loading=false
                    // res.data.items.forEach(el=>{
                    //     el.startTime=this.transferTime(el.startTime)
                    //     el.endTime= this.transferTime(el.endTime)
                    // })
                 this.advertiseList=res.data.items
                }
            })

        },
        // 时间戳转换为正常时间
        transferTime(val){
               var date = new Date(val)
              // console.log(date)
              var Y = date.getFullYear() + '-'
              var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
              var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
              var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
              var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
              var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
              return Y + M + D + h + m + s

        },
        goEditAdvertise(row) {
            this.$router.push({name:'advertiseListEdit',query:{item:row}})

        },
        addAvertise(){
            this.$router.push({name:'advertiseListEdit'})
        },
        goDelAdvertise(id) {
            this.$confirm("此操作将永久删除该营销列, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    delAds(id).then((res) => {
                        console.log(res);
                        if (res.success) {
                            this.init();
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                        } else {
                            this.$message.error("删除失败！！！");
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },

    },
};
</script>

<style scoped lang="scss">
.card{
    margin: 30px;
}
img{
    width: 120px;
    height: 120px;
}

</style>
